<template>
	<div>
		<div class="body" :style="{left:isPages?'100%':'0'}">
			<keep-alive>
				<router-view></router-view>
			</keep-alive>
		</div>
		<div class="tabbar">
			<TabBar @skip='skip'></TabBar>
		</div>
	</div>
</template>

<script>
	import { useRoute,useRouter} from 'vue-router'
	import {defineComponent,provide,ref} from 'vue';
	import axios from '@assets/request/index';
	
	//tabba
	import TabBar from '../../components/common/TabBar/index.vue'
	
	export default defineComponent({
		components:{
			TabBar
		},
		setup(){
			//tabbar list
			provide('list',[
				{
					name:'店铺',
					path:'/Home/Shop',
					icon:'&#xe735;'
				},
				{
					name:'消息',
					path:'/Home/News',
					icon:'&#xe64f;'
				},
				{
					name:'我的',
					path:'/Home/My',
					icon:'&#xe62f;'
				},
			])
			const router=useRouter()
			const route = useRoute()
			//路由跳转
			function skip(path){
				router.replace({
					path
				});
			}
			provide('skip',skip)
			const Data_token=route.query.ciphertext||false;
			provide('token',Data_token)
			return {
				name:'首页',
				token:Data_token
			}
		}
	})
</script>

<style scoped="scoped">
	
	@media not all and (max-width:550px){
		.body{
			margin-top: calc(7vh + 7px);
		}
	}
	.header{
			background-color: #fff;
			font-size: 1.5em;
			padding: 5px 0;
			border-bottom: 1px solid #666;
	}
	.tabbar{
		width: 100%;
		height: 1.5em;
		position: fixed;
		background-color: #ff9000;
		top:0;
	}
	@media not all and (min-width:550px){
		.tabbar{
			top:100%;
			transform: translateY(-100%);
		}
	}
</style>

